<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数字乡村App原型</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      :root {
        --primary-color: #22af45;
        --secondary-color: #e8f5e9;
        --text-color: #333333;
        --light-gray: #f5f5f5;
        --border-color: #e0e0e0;
      }

      body {
        font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        color: var(--text-color);
        background-color: #f8f9fa;
      }

      .app-container {
        max-width: 375px;
        height: 812px;
        background-color: white;
        border-radius: 30px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        margin: 20px;
        border: 1px solid #ddd;
      }

      .status-bar {
        height: 44px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 600;
      }

      .nav-bar {
        height: 50px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid var(--border-color);
      }

      .tab-bar {
        height: 60px;
        background-color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid var(--border-color);
        position: absolute;
        bottom: 0;
        width: 100%;
      }

      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
        color: #999;
      }

      .tab-item.active {
        color: var(--primary-color);
      }

      .tab-item i {
        font-size: 22px;
        margin-bottom: 2px;
      }

      .content {
        height: calc(812px - 44px - 50px - 60px);
        overflow-y: auto;
        padding: 16px;
      }

      .card {
        background-color: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .btn-primary {
        background-color: var(--primary-color);
        color: white;
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 500;
      }

      .btn-outline {
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
        border-radius: 8px;
        padding: 10px 20px;
        font-weight: 500;
      }

      .grid-item {
        background-color: white;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }

      .grid-item i {
        font-size: 24px;
        color: var(--primary-color);
        margin-bottom: 8px;
      }

      .badge {
        background-color: #ff4d4f;
        color: white;
        border-radius: 10px;
        padding: 2px 6px;
        font-size: 10px;
        position: absolute;
        top: -5px;
        right: -5px;
      }

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: #e0e0e0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-weight: bold;
      }

      .search-bar {
        background-color: var(--light-gray);
        border-radius: 20px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }

      .search-bar i {
        color: #999;
        margin-right: 8px;
      }

      .search-input {
        border: none;
        background: transparent;
        flex: 1;
        outline: none;
        color: #333;
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #333;
      }

      .list-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
      }

      .list-item:last-child {
        border-bottom: none;
      }

      .list-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: var(--secondary-color);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
      }

      .list-item-icon i {
        color: var(--primary-color);
        font-size: 20px;
      }

      .list-item-content {
        flex: 1;
      }

      .list-item-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .list-item-desc {
        font-size: 14px;
        color: #666;
      }

      .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
      }

      .tag-primary {
        background-color: var(--secondary-color);
        color: var(--primary-color);
      }

      .tag-warning {
        background-color: #fff7e6;
        color: #fa8c16;
      }

      .tag-danger {
        background-color: #fff1f0;
        color: #f5222d;
      }

      .progress-bar {
        height: 6px;
        background-color: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 8px;
      }

      .progress-bar-inner {
        height: 100%;
        background-color: var(--primary-color);
        border-radius: 3px;
      }

      .prototype-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
        gap: 30px;
        padding: 30px;
      }

      .prototype-title {
        text-align: center;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
      }
    </style>
  </head>
  <body class="bg-gray-100">
    <div class="container mx-auto py-8">
      <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">
        数字乡村App原型设计
      </h1>

      <div class="prototype-grid">
        <!-- 登录界面 -->
        <div>
          <div class="prototype-title">登录界面</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div
              class="flex flex-col items-center justify-center h-full bg-white px-8"
            >
              <div
                class="w-24 h-24 rounded-full bg-green-50 flex items-center justify-center mb-8"
              >
                <i
                  class="fas fa-leaf text-5xl"
                  style="color: var(--primary-color)"
                ></i>
              </div>
              <h1 class="text-2xl font-bold mb-10 text-gray-800">数字乡村</h1>
              <div class="w-full mb-4">
                <div class="flex items-center border-b border-gray-300 py-2">
                  <i class="fas fa-user text-gray-400 mr-3"></i>
                  <input
                    type="text"
                    placeholder="请输入用户名"
                    class="w-full focus:outline-none"
                  />
                </div>
              </div>
              <div class="w-full mb-8">
                <div class="flex items-center border-b border-gray-300 py-2">
                  <i class="fas fa-lock text-gray-400 mr-3"></i>
                  <input
                    type="password"
                    placeholder="请输入密码"
                    class="w-full focus:outline-none"
                  />
                  <i class="fas fa-eye-slash text-gray-400 ml-2"></i>
                </div>
              </div>
              <button
                class="w-full py-3 rounded-lg font-medium text-white"
                style="background-color: var(--primary-color)"
              >
                登录
              </button>
              <div
                class="flex justify-between w-full mt-4 text-sm text-gray-500"
              >
                <span>忘记密码?</span>
                <span>注册账号</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 工作台界面 -->
        <div>
          <div class="prototype-title">工作台</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="text-lg font-semibold">工作台</div>
              <div class="flex">
                <i class="fas fa-bell text-gray-600 mr-4 relative">
                  <span class="badge">3</span>
                </i>
                <i class="fas fa-search text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div
                class="card"
                style="background-color: var(--primary-color); color: white"
              >
                <div class="flex justify-between items-center mb-4">
                  <div>
                    <div class="text-lg font-semibold">张明</div>
                    <div class="text-sm opacity-80">网格员 | 东湖社区</div>
                  </div>
                  <div class="avatar bg-white text-green-600">张</div>
                </div>
                <div class="flex justify-between text-sm">
                  <div>
                    <div class="text-2xl font-bold mb-1">12</div>
                    <div>待办事项</div>
                  </div>
                  <div>
                    <div class="text-2xl font-bold mb-1">8</div>
                    <div>今日任务</div>
                  </div>
                  <div>
                    <div class="text-2xl font-bold mb-1">85%</div>
                    <div>完成率</div>
                  </div>
                </div>
              </div>

              <div class="section-title">数据概览</div>
              <div class="grid grid-cols-4 gap-3 mb-6">
                <div class="grid-item">
                  <i class="fas fa-building"></i>
                  <div class="text-xs">楼房</div>
                  <div class="text-sm font-bold">24</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-home"></i>
                  <div class="text-xs">房屋</div>
                  <div class="text-sm font-bold">156</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-users"></i>
                  <div class="text-xs">户籍</div>
                  <div class="text-sm font-bold">89</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-user"></i>
                  <div class="text-xs">人口</div>
                  <div class="text-sm font-bold">312</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-cctv"></i>
                  <div class="text-xs">部件</div>
                  <div class="text-sm font-bold">45</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-store"></i>
                  <div class="text-xs">企业</div>
                  <div class="text-sm font-bold">18</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-exclamation-circle"></i>
                  <div class="text-xs">事件</div>
                  <div class="text-sm font-bold">7</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-home"></i>
                  <div class="text-xs">院落</div>
                  <div class="text-sm font-bold">32</div>
                </div>
              </div>

              <div class="section-title">通知公告</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-bullhorn"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">
                      关于开展农村人居环境整治工作的通知
                    </div>
                    <div class="list-item-desc">2023-06-15</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-bullhorn"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">振兴乡村政策宣讲会通知</div>
                    <div class="list-item-desc">2023-06-10</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="section-title">待办事项</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集</div>
                    <div class="list-item-desc">截止日期: 2023-06-20</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 60%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全隐患排查</div>
                    <div class="list-item-desc">截止日期: 2023-06-18</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 30%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
              </div>
            </div>
            <div class="tab-bar">
              <div class="tab-item active">
                <i class="fas fa-home"></i>
                <span>工作台</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-clipboard-list"></i>
                <span>信息采集</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-tasks"></i>
                <span>工作管理</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 信息采集界面 -->
        <div>
          <div class="prototype-title">信息采集</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="text-lg font-semibold">信息采集</div>
              <div class="flex">
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="search-bar">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索信息"
                  class="search-input"
                />
              </div>

              <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="grid-item">
                  <i class="fas fa-building"></i>
                  <div class="text-sm">楼房</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-home"></i>
                  <div class="text-sm">房屋</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-users"></i>
                  <div class="text-sm">户籍</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-user"></i>
                  <div class="text-sm">人口</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-cctv"></i>
                  <div class="text-sm">部件</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-store"></i>
                  <div class="text-sm">企业</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-exclamation-circle"></i>
                  <div class="text-sm">事件</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-home"></i>
                  <div class="text-sm">院落</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-ellipsis-h"></i>
                  <div class="text-sm">更多</div>
                </div>
              </div>

              <div class="section-title">最近采集</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">李明 - 人口信息</div>
                    <div class="list-item-desc">2023-06-15 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-home"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">
                      东湖小区3栋2单元 - 房屋信息
                    </div>
                    <div class="list-item-desc">2023-06-14 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-store"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖便利店 - 企业信息</div>
                    <div class="list-item-desc">2023-06-13 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="tab-bar">
              <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
              </div>
              <div class="tab-item active">
                <i class="fas fa-clipboard-list"></i>
                <span>信息采集</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-tasks"></i>
                <span>工作管理</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 人口信息采集界面 -->
        <div>
          <div class="prototype-title">人口信息采集</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">人口信息采集</div>
              </div>
              <div class="flex">
                <i class="fas fa-save text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card">
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">姓名</div>
                  <input
                    type="text"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="请输入姓名"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">性别</div>
                  <div class="flex">
                    <div class="flex items-center mr-4">
                      <input
                        type="radio"
                        id="male"
                        name="gender"
                        class="mr-1"
                      />
                      <label for="male">男</label>
                    </div>
                    <div class="flex items-center">
                      <input
                        type="radio"
                        id="female"
                        name="gender"
                        class="mr-1"
                      />
                      <label for="female">女</label>
                    </div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">出生日期</div>
                  <input
                    type="date"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">身份证号</div>
                  <input
                    type="text"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="请输入身份证号"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">联系电话</div>
                  <input
                    type="tel"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="请输入联系电话"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">户籍地址</div>
                  <input
                    type="text"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="请输入户籍地址"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">现居住地</div>
                  <input
                    type="text"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="请输入现居住地"
                  />
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">人口类型</div>
                  <select
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                  >
                    <option>常住人口</option>
                    <option>流动人口</option>
                    <option>特殊人群</option>
                  </select>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">备注</div>
                  <textarea
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    rows="3"
                    placeholder="请输入备注信息"
                  ></textarea>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">上传照片</div>
                  <div
                    class="border border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center"
                  >
                    <i class="fas fa-camera text-gray-400 text-2xl mb-2"></i>
                    <div class="text-sm text-gray-500">点击上传照片</div>
                  </div>
                </div>
                <button
                  class="w-full py-3 rounded-lg font-medium text-white"
                  style="background-color: var(--primary-color)"
                >
                  保存信息
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 工作管理界面 -->
        <!-- 工作管理界面 -->
        <div>
          <div class="prototype-title">工作管理</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="text-lg font-semibold">工作管理</div>
              <div class="flex">
                <i class="fas fa-filter text-gray-600 mr-3"></i>
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="search-bar mb-4">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索工作内容"
                  class="search-input"
                />
              </div>

              <div class="grid grid-cols-4 gap-3 mb-6">
                <div class="grid-item">
                  <i class="fas fa-clipboard"></i>
                  <div class="text-xs">日志管理</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-tasks"></i>
                  <div class="text-xs">工作计划</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-envelope"></i>
                  <div class="text-xs">内部邮件</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-address-book"></i>
                  <div class="text-xs">通讯录</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-map-marker-alt"></i>
                  <div class="text-xs">工作签到</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-exclamation-circle"></i>
                  <div class="text-xs">事件管理</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-route"></i>
                  <div class="text-xs">网格巡查</div>
                </div>
                <div class="grid-item">
                  <i class="fas fa-comment-alt"></i>
                  <div class="text-xs">信访管理</div>
                </div>
              </div>

              <div class="section-title">待办任务</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集</div>
                    <div class="list-item-desc">截止日期: 2023-06-20</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 60%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全隐患排查</div>
                    <div class="list-item-desc">截止日期: 2023-06-18</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 30%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
              </div>

              <div class="section-title">今日日志</div>
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-sm text-gray-500 mb-1">工作日志</div>
                  <textarea
                    placeholder="请输入今日工作内容..."
                    rows="3"
                    class="w-full py-2 px-3 rounded-lg border border-gray-200 mb-3"
                  ></textarea>
                  <div class="flex justify-between">
                    <div class="text-xs text-gray-400">今日已完成任务：2/8</div>
                    <button
                      class="text-xs px-3 py-1 rounded bg-green-500 text-white"
                    >
                      提交日志
                    </button>
                  </div>
                </div>
              </div>

              <div class="section-title">最近巡查</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-route"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区安全巡查</div>
                    <div class="list-item-desc">2023-06-15 完成</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-route"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">农村环境卫生巡查</div>
                    <div class="list-item-desc">2023-06-12 完成</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="section-title">未读邮件</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于下周工作安排的通知</div>
                    <div class="list-item-desc">李主任 · 10:30</div>
                  </div>
                  <div class="tag tag-danger">未读</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">
                      请协助处理东湖社区反馈问题
                    </div>
                    <div class="list-item-desc">王经理 · 昨天</div>
                  </div>
                  <div class="tag tag-danger">未读</div>
                </div>
              </div>
            </div>
            <div class="tab-bar">
              <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-clipboard-list"></i>
                <span>信息采集</span>
              </div>
              <div class="tab-item active">
                <i class="fas fa-tasks"></i>
                <span>工作管理</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 工作管理界面 -->
        <div>
          <div class="prototype-title">工作管理</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="text-lg font-semibold">工作管理</div>
              <div class="flex">
                <i class="fas fa-filter text-gray-600 mr-3"></i>
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  待办任务
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">已完成</div>
              </div>

              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集</div>
                    <div class="list-item-desc">截止日期: 2023-06-20</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 60%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全隐患排查</div>
                    <div class="list-item-desc">截止日期: 2023-06-18</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 30%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tasks"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">农村环境整治检查</div>
                    <div class="list-item-desc">截止日期: 2023-06-25</div>
                    <div class="progress-bar">
                      <div class="progress-bar-inner" style="width: 10%"></div>
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
              </div>
            </div>
            <div class="tab-bar">
              <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-clipboard-list"></i>
                <span>信息采集</span>
              </div>
              <div class="tab-item active">
                <i class="fas fa-tasks"></i>
                <span>工作管理</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 日志管理界面 -->
        <div>
          <div class="prototype-title">日志管理</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">日志管理</div>
              </div>
              <div class="flex">
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  我的日志
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  部门日志
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-sm text-gray-500 mb-1">今日工作日志</div>
                  <textarea
                    placeholder="请输入今日工作内容..."
                    rows="5"
                    class="w-full py-2 px-3 rounded-lg border border-gray-200 mb-3"
                  ></textarea>
                  <div class="mb-3">
                    <div class="text-sm text-gray-500 mb-1">完成任务</div>
                    <div class="flex items-center mb-2">
                      <input type="checkbox" id="task1" class="mr-2" />
                      <label for="task1" class="text-sm"
                        >东湖社区人口信息采集（3户）</label
                      >
                    </div>
                    <div class="flex items-center mb-2">
                      <input type="checkbox" id="task2" class="mr-2" />
                      <label for="task2" class="text-sm"
                        >安全隐患排查（2处）</label
                      >
                    </div>
                    <div class="flex items-center">
                      <input type="checkbox" id="task3" class="mr-2" />
                      <label for="task3" class="text-sm"
                        >农村环境整治检查</label
                      >
                    </div>
                  </div>
                  <div class="mb-3">
                    <div class="text-sm text-gray-500 mb-1">工作照片</div>
                    <div class="flex space-x-2 mb-2">
                      <div
                        class="border border-dashed border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center w-16 h-16"
                      >
                        <i class="fas fa-plus text-gray-400"></i>
                      </div>
                    </div>
                  </div>
                  <button
                    class="w-full py-2 rounded-lg font-medium text-white"
                    style="background-color: var(--primary-color)"
                  >
                    提交日志
                  </button>
                </div>
              </div>

              <div class="section-title">历史日志</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-clipboard"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">2023-06-15 工作日志</div>
                    <div class="list-item-desc">完成任务：3项</div>
                  </div>
                  <div class="tag tag-success">已审阅</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-clipboard"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">2023-06-14 工作日志</div>
                    <div class="list-item-desc">完成任务：2项</div>
                  </div>
                  <div class="tag tag-success">已审阅</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-clipboard"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">2023-06-13 工作日志</div>
                    <div class="list-item-desc">完成任务：4项</div>
                  </div>
                  <div class="tag tag-success">已审阅</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 内部邮件界面 -->
        <div>
          <div class="prototype-title">内部邮件</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">内部邮件</div>
              </div>
              <div class="flex">
                <i class="fas fa-edit text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  收件箱
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">已发送</div>
                <div class="flex-1 text-center py-2 text-gray-500">草稿箱</div>
              </div>

              <div class="search-bar mb-4">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索邮件"
                  class="search-input"
                />
              </div>

              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于下周工作安排的通知</div>
                    <div class="list-item-desc">李主任 · 10:30</div>
                    <div class="text-xs text-gray-500 mt-1">
                      请各位同事注意，下周将进行全面的社区安全排查工作...
                    </div>
                  </div>
                  <div class="tag tag-danger">未读</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">
                      请协助处理东湖社区反馈问题
                    </div>
                    <div class="list-item-desc">王经理 · 昨天</div>
                    <div class="text-xs text-gray-500 mt-1">
                      东湖社区居民反映小区内有安全隐患，请尽快前往处理...
                    </div>
                  </div>
                  <div class="tag tag-danger">未读</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-envelope-open"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于信息采集工作的反馈</div>
                    <div class="list-item-desc">赵组长 · 06-15</div>
                    <div class="text-xs text-gray-500 mt-1">
                      您提交的信息采集工作已审核通过，感谢您的辛勤工作...
                    </div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-envelope-open"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">月度工作总结会议通知</div>
                    <div class="list-item-desc">系统管理员 · 06-12</div>
                    <div class="text-xs text-gray-500 mt-1">
                      定于本月20日下午2点在会议室召开月度工作总结会议...
                    </div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-envelope-open"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">系统更新通知</div>
                    <div class="list-item-desc">系统管理员 · 06-10</div>
                    <div class="text-xs text-gray-500 mt-1">
                      数字乡村App将于本周日凌晨2点-4点进行系统维护更新...
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 邮件详情界面 -->
        <div>
          <div class="prototype-title">邮件详情</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">邮件详情</div>
              </div>
              <div class="flex">
                <i class="fas fa-trash text-gray-600 mr-3"></i>
                <i class="fas fa-reply text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-xl font-semibold mb-3">
                    关于下周工作安排的通知
                  </div>
                  <div class="flex items-center mb-4">
                    <div class="avatar mr-2">李</div>
                    <div>
                      <div class="text-sm font-medium">李主任</div>
                      <div class="text-xs text-gray-500">今天 10:30</div>
                    </div>
                    <div class="text-xs text-gray-500 ml-auto">
                      收件人：全体工作人员
                    </div>
                  </div>
                  <div class="text-sm mb-4">
                    <p class="mb-2">各位同事：</p>
                    <p class="mb-2">
                      请注意，下周将进行全面的社区安全排查工作，具体安排如下：
                    </p>
                    <p class="mb-2">
                      1.
                      周一至周三：各网格员负责对所属网格内的安全隐患进行排查，重点关注消防安全、建筑安全和公共设施安全。
                    </p>
                    <p class="mb-2">2. 周四：汇总排查结果，形成问题清单。</p>
                    <p class="mb-2">3. 周五：制定整改方案，并开始实施整改。</p>
                    <p class="mb-2">
                      请各位做好准备工作，确保排查工作顺利进行。如有疑问，请及时与我联系。
                    </p>
                    <p class="mb-2">谢谢！</p>
                  </div>
                  <div class="text-xs text-gray-500">
                    李主任<br />
                    东湖社区管理办公室<br />
                    联系电话：138****1234
                  </div>
                </div>
              </div>

              <div class="flex space-x-3 mb-6">
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white bg-blue-500"
                >
                  <i class="fas fa-reply mr-1"></i> 回复
                </button>
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white bg-green-500"
                >
                  <i class="fas fa-share mr-1"></i> 转发
                </button>
              </div>

              <div class="section-title">附件</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon bg-blue-100 text-blue-500">
                    <i class="fas fa-file-word"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全排查工作方案.docx</div>
                    <div class="list-item-desc">156KB</div>
                  </div>
                  <i class="fas fa-download text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-file-pdf"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全隐患排查表.pdf</div>
                    <div class="list-item-desc">245KB</div>
                  </div>
                  <i class="fas fa-download text-gray-400"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 工作计划界面 -->
        <div>
          <div class="prototype-title">工作计划</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">工作计划</div>
              </div>
              <div class="flex">
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <!-- 日历视图 -->
              <div class="card mb-6">
                <div class="p-4">
                  <div class="flex justify-between items-center mb-4">
                    <div class="text-lg font-semibold">2023年6月</div>
                    <div class="flex">
                      <button class="text-gray-500 mr-2">
                        <i class="fas fa-chevron-left"></i>
                      </button>
                      <button class="text-gray-500">
                        <i class="fas fa-chevron-right"></i>
                      </button>
                    </div>
                  </div>
                  <div class="grid grid-cols-7 gap-1 mb-2">
                    <div class="text-center text-xs text-gray-500">日</div>
                    <div class="text-center text-xs text-gray-500">一</div>
                    <div class="text-center text-xs text-gray-500">二</div>
                    <div class="text-center text-xs text-gray-500">三</div>
                    <div class="text-center text-xs text-gray-500">四</div>
                    <div class="text-center text-xs text-gray-500">五</div>
                    <div class="text-center text-xs text-gray-500">六</div>
                  </div>
                  <div class="grid grid-cols-7 gap-1">
                    <div class="text-center py-2 text-gray-300">28</div>
                    <div class="text-center py-2 text-gray-300">29</div>
                    <div class="text-center py-2 text-gray-300">30</div>
                    <div class="text-center py-2 text-gray-300">31</div>
                    <div class="text-center py-2">1</div>
                    <div class="text-center py-2">2</div>
                    <div class="text-center py-2">3</div>
                    <div class="text-center py-2">4</div>
                    <div class="text-center py-2">5</div>
                    <div class="text-center py-2">6</div>
                    <div class="text-center py-2">7</div>
                    <div class="text-center py-2">8</div>
                    <div class="text-center py-2">9</div>
                    <div class="text-center py-2">10</div>
                    <div class="text-center py-2">11</div>
                    <div class="text-center py-2">12</div>
                    <div class="text-center py-2">13</div>
                    <div class="text-center py-2">14</div>
                    <div class="text-center py-2">15</div>
                    <div
                      class="text-center py-2 rounded-full bg-green-500 text-white"
                    >
                      16
                    </div>
                    <div class="text-center py-2 relative">
                      17
                      <div
                        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-blue-500"
                      ></div>
                    </div>
                    <div class="text-center py-2 relative">
                      18
                      <div
                        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-blue-500"
                      ></div>
                    </div>
                    <div class="text-center py-2 relative">
                      19
                      <div
                        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-red-500"
                      ></div>
                    </div>
                    <div class="text-center py-2 relative">
                      20
                      <div
                        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-red-500"
                      ></div>
                    </div>
                    <div class="text-center py-2">21</div>
                    <div class="text-center py-2">22</div>
                    <div class="text-center py-2">23</div>
                    <div class="text-center py-2">24</div>
                    <div class="text-center py-2">25</div>
                    <div class="text-center py-2">26</div>
                    <div class="text-center py-2">27</div>
                    <div class="text-center py-2">28</div>
                    <div class="text-center py-2">29</div>
                    <div class="text-center py-2">30</div>
                    <div class="text-center py-2 text-gray-300">1</div>
                  </div>
                </div>
              </div>

              <!-- 今日计划 -->
              <div class="section-title">今日计划 (6月16日)</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集</div>
                    <div class="list-item-desc">09:00 - 11:30</div>
                    <div class="text-xs text-gray-500 mt-1">已完成 5/10 户</div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-blue-100 text-blue-500">
                    <i class="fas fa-clock"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖小区巡查</div>
                    <div class="list-item-desc">13:30 - 15:00</div>
                    <div class="text-xs text-gray-500 mt-1">
                      巡查3个点位，检查安全隐患
                    </div>
                  </div>
                  <div class="tag tag-warning">进行中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-gray-100 text-gray-500">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区工作例会</div>
                    <div class="list-item-desc">16:00 - 17:00</div>
                    <div class="text-xs text-gray-500 mt-1">
                      社区会议室，汇报本周工作进展
                    </div>
                  </div>
                  <div class="tag tag-default">待开始</div>
                </div>
              </div>

              <!-- 近期计划 -->
              <div class="section-title">近期计划</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-exclamation-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集截止</div>
                    <div class="list-item-desc">6月20日</div>
                    <div class="text-xs text-gray-500 mt-1">
                      完成剩余45户信息采集
                    </div>
                  </div>
                  <div class="tag tag-danger">紧急</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-orange-100 text-orange-500">
                    <i class="fas fa-exclamation-triangle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区安全隐患排查</div>
                    <div class="list-item-desc">6月18日 - 6月19日</div>
                    <div class="text-xs text-gray-500 mt-1">
                      排查社区消防、电气等安全隐患
                    </div>
                  </div>
                  <div class="tag tag-warning">重要</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-blue-100 text-blue-500">
                    <i class="fas fa-calendar-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区文化活动策划会议</div>
                    <div class="list-item-desc">6月22日 14:00</div>
                    <div class="text-xs text-gray-500 mt-1">
                      策划7月社区文化活动
                    </div>
                  </div>
                  <div class="tag tag-info">一般</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-blue-100 text-blue-500">
                    <i class="fas fa-calendar-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区环境整治行动</div>
                    <div class="list-item-desc">6月25日 - 6月26日</div>
                    <div class="text-xs text-gray-500 mt-1">
                      组织社区环境清理，美化社区环境
                    </div>
                  </div>
                  <div class="tag tag-info">一般</div>
                </div>
              </div>

              <!-- 添加计划按钮 -->
              <button
                class="w-full py-3 rounded-lg font-medium text-white mt-6"
                style="background-color: var(--primary-color)"
              >
                <i class="fas fa-plus-circle mr-2"></i> 添加工作计划
              </button>
            </div>
          </div>
        </div>

        <!-- 通讯录界面 -->
        <div>
          <div class="prototype-title">通讯录</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">通讯录</div>
              </div>
              <div class="flex">
                <i class="fas fa-search text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="search-bar mb-4">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索联系人"
                  class="search-input"
                />
              </div>

              <div class="section-title">管理层</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="avatar mr-3">李</div>
                  <div class="list-item-content">
                    <div class="list-item-title">李主任</div>
                    <div class="list-item-desc">社区主任 | 138****1234</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
                <div class="list-item">
                  <div class="avatar mr-3">王</div>
                  <div class="list-item-content">
                    <div class="list-item-title">王经理</div>
                    <div class="list-item-desc">办公室主任 | 139****5678</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
              </div>

              <div class="section-title">网格管理部</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="avatar mr-3">赵</div>
                  <div class="list-item-content">
                    <div class="list-item-title">赵组长</div>
                    <div class="list-item-desc">网格管理组长 | 137****2345</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
                <div class="list-item">
                  <div class="avatar mr-3">张</div>
                  <div class="list-item-content">
                    <div class="list-item-title">张明</div>
                    <div class="list-item-desc">网格员 | 138****5678</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
                <div class="list-item">
                  <div class="avatar mr-3">刘</div>
                  <div class="list-item-content">
                    <div class="list-item-title">刘华</div>
                    <div class="list-item-desc">网格员 | 136****9012</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
                <div class="list-item">
                  <div class="avatar mr-3">陈</div>
                  <div class="list-item-content">
                    <div class="list-item-title">陈明</div>
                    <div class="list-item-desc">网格员 | 135****3456</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
              </div>

              <div class="section-title">服务管理部</div>
              <div class="card">
                <div class="list-item">
                  <div class="avatar mr-3">周</div>
                  <div class="list-item-content">
                    <div class="list-item-title">周组长</div>
                    <div class="list-item-desc">服务管理组长 | 134****7890</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
                <div class="list-item">
                  <div class="avatar mr-3">吴</div>
                  <div class="list-item-content">
                    <div class="list-item-title">吴丽</div>
                    <div class="list-item-desc">服务专员 | 133****1234</div>
                  </div>
                  <i class="fas fa-phone text-green-500"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 工作签到界面 -->
        <div>
          <div class="prototype-title">工作签到</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">工作签到</div>
              </div>
              <div class="flex">
                <i class="fas fa-history text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-center mb-4">
                    <div class="text-lg font-semibold mb-1">今日签到</div>
                    <div class="text-sm text-gray-500">
                      2023年6月16日 星期五
                    </div>
                  </div>
                  <div class="flex justify-center mb-6">
                    <div class="relative">
                      <div
                        class="w-32 h-32 rounded-full bg-green-50 flex items-center justify-center"
                        style="border: 4px solid var(--primary-color)"
                      >
                        <div class="text-center">
                          <div
                            class="text-xl font-bold"
                            style="color: var(--primary-color)"
                          >
                            09:41
                          </div>
                          <div class="text-xs text-gray-500">当前时间</div>
                        </div>
                      </div>
                      <div
                        class="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white"
                      >
                        <i class="fas fa-map-marker-alt"></i>
                      </div>
                    </div>
                  </div>
                  <div class="text-center mb-4">
                    <div class="text-sm text-gray-500 mb-1">当前位置</div>
                    <div class="text-sm">东湖社区服务中心</div>
                  </div>
                  <button
                    class="w-full py-3 rounded-lg font-medium text-white"
                    style="background-color: var(--primary-color)"
                  >
                    <i class="fas fa-map-marker-alt mr-2"></i> 签到打卡
                  </button>
                </div>
              </div>

              <div class="section-title">本周签到记录</div>
              <div class="card mb-6">
                <div class="grid grid-cols-7 gap-2 p-4">
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">一</div>
                    <div
                      class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mx-auto"
                    >
                      <i class="fas fa-check text-green-500 text-xs"></i>
                    </div>
                    <div class="text-xs mt-1">12</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">二</div>
                    <div
                      class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mx-auto"
                    >
                      <i class="fas fa-check text-green-500 text-xs"></i>
                    </div>
                    <div class="text-xs mt-1">13</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">三</div>
                    <div
                      class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mx-auto"
                    >
                      <i class="fas fa-check text-green-500 text-xs"></i>
                    </div>
                    <div class="text-xs mt-1">14</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">四</div>
                    <div
                      class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mx-auto"
                    >
                      <i class="fas fa-check text-green-500 text-xs"></i>
                    </div>
                    <div class="text-xs mt-1">15</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">五</div>
                    <div
                      class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mx-auto"
                    >
                      <i class="fas fa-clock text-gray-400 text-xs"></i>
                    </div>
                    <div class="text-xs mt-1 font-bold">16</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">六</div>
                    <div
                      class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mx-auto"
                    >
                      <span class="text-gray-400 text-xs">休</span>
                    </div>
                    <div class="text-xs mt-1">17</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xs text-gray-500 mb-1">日</div>
                    <div
                      class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mx-auto"
                    >
                      <span class="text-gray-400 text-xs">休</span>
                    </div>
                    <div class="text-xs mt-1">18</div>
                  </div>
                </div>
                <div
                  class="flex justify-between px-4 pb-4 text-xs text-gray-500"
                >
                  <div>本周已签到: 4天</div>
                  <div>连续签到: 4天</div>
                </div>
              </div>

              <div class="section-title">签到统计</div>
              <div class="card">
                <div class="grid grid-cols-3 gap-4 p-4">
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      22
                    </div>
                    <div class="text-xs text-gray-500">本月签到</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      4
                    </div>
                    <div class="text-xs text-gray-500">连续签到</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      98%
                    </div>
                    <div class="text-xs text-gray-500">签到率</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 签到历史界面 -->
        <div>
          <div class="prototype-title">签到历史</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">签到历史</div>
              </div>
              <div class="flex">
                <i class="fas fa-calendar-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  签到记录
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  签到轨迹
                </div>
              </div>

              <div class="section-title">2023年6月</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-06-15 08:32</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-06-14 08:45</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-06-13 08:28</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-06-12 08:50</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
              </div>

              <div class="section-title">2023年5月</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-05-31 08:35</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-05-30 08:42</div>
                  </div>
                  <div class="tag tag-success">正常</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-map-marker-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区服务中心</div>
                    <div class="list-item-desc">2023-05-29 09:05</div>
                  </div>
                  <div class="tag tag-warning">迟到</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 事件管理界面 -->
        <div>
          <div class="prototype-title">事件管理</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">事件管理</div>
              </div>
              <div class="flex">
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  全部事件
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">待处理</div>
                <div class="flex-1 text-center py-2 text-gray-500">已处理</div>
              </div>

              <div class="search-bar mb-4">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索事件"
                  class="search-input"
                />
              </div>

              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon bg-red-100 text-red-500">
                    <i class="fas fa-exclamation-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖小区消防栓损坏</div>
                    <div class="list-item-desc">紧急 · 2023-06-15</div>
                    <div class="text-xs text-gray-500 mt-1">
                      东湖小区3栋2单元一楼消防栓损坏，存在安全隐患
                    </div>
                  </div>
                  <div class="tag tag-warning">处理中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-orange-100 text-orange-500">
                    <i class="fas fa-exclamation-triangle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">西湖公园健身设施损坏</div>
                    <div class="list-item-desc">一般 · 2023-06-14</div>
                    <div class="text-xs text-gray-500 mt-1">
                      西湖公园南侧健身区域的拉伸器损坏
                    </div>
                  </div>
                  <div class="tag tag-warning">处理中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">南湖社区路灯不亮</div>
                    <div class="list-item-desc">一般 · 2023-06-10</div>
                    <div class="text-xs text-gray-500 mt-1">
                      南湖社区5号楼前路灯不亮，夜间存在安全隐患
                    </div>
                  </div>
                  <div class="tag tag-success">已解决</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">北湖小区垃圾堆积</div>
                    <div class="list-item-desc">一般 · 2023-06-08</div>
                    <div class="text-xs text-gray-500 mt-1">
                      北湖小区2号垃圾站垃圾堆积，未及时清理
                    </div>
                  </div>
                  <div class="tag tag-success">已解决</div>
                </div>
              </div>

              <div class="section-title">事件统计</div>
              <div class="card">
                <div class="grid grid-cols-3 gap-4 p-4">
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      12
                    </div>
                    <div class="text-xs text-gray-500">本月事件</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xl font-bold" style="color: #e6a23c">
                      3
                    </div>
                    <div class="text-xs text-gray-500">处理中</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xl font-bold" style="color: #67c23a">
                      9
                    </div>
                    <div class="text-xs text-gray-500">已解决</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 事件详情界面 -->
        <div>
          <div class="prototype-title">事件详情</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">事件详情</div>
              </div>
              <div class="flex">
                <i class="fas fa-share-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="flex items-center mb-3">
                    <div class="tag tag-danger mr-2">紧急</div>
                    <div class="text-xl font-semibold">东湖小区消防栓损坏</div>
                  </div>
                  <div class="flex items-center mb-4">
                    <div class="tag tag-warning">处理中</div>
                    <div class="text-sm text-gray-500 ml-2">
                      上报时间: 2023-06-15 10:23
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">事件描述</div>
                    <div class="text-sm">
                      东湖小区3栋2单元一楼消防栓损坏，外壳破损，水管接口松动，存在安全隐患。居民反映已有一周时间，希望尽快修复。
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">事件位置</div>
                    <div class="text-sm">东湖小区3栋2单元一楼</div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">上报人</div>
                    <div class="flex items-center">
                      <div class="avatar mr-2">王</div>
                      <div>
                        <div class="text-sm font-medium">王丽</div>
                        <div class="text-xs text-gray-500">
                          居民 | 138****5678
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">事件照片</div>
                    <div class="grid grid-cols-3 gap-2">
                      <div class="bg-gray-100 rounded-lg h-20"></div>
                      <div class="bg-gray-100 rounded-lg h-20"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">处理进度</div>
              <div class="card mb-6">
                <div class="p-4">
                  <div class="relative">
                    <div
                      class="absolute left-2 top-0 bottom-0 w-0.5 bg-gray-200"
                    ></div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">事件上报</div>
                      <div class="text-xs text-gray-500">2023-06-15 10:23</div>
                      <div class="text-xs text-gray-500 mt-1">
                        居民王丽上报了消防栓损坏问题
                      </div>
                    </div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">受理事件</div>
                      <div class="text-xs text-gray-500">2023-06-15 11:05</div>
                      <div class="text-xs text-gray-500 mt-1">
                        网格员张明受理了该事件
                      </div>
                    </div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">现场勘查</div>
                      <div class="text-xs text-gray-500">2023-06-15 14:30</div>
                      <div class="text-xs text-gray-500 mt-1">
                        网格员张明前往现场勘查，确认消防栓损坏情况
                      </div>
                    </div>
                    <div class="relative pl-8">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center"
                      >
                        <i class="fas fa-sync-alt text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">维修处理</div>
                      <div class="text-xs text-gray-500">进行中</div>
                      <div class="text-xs text-gray-500 mt-1">
                        已联系物业维修人员，预计6月17日完成维修
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">处理记录</div>
              <div class="card mb-6">
                <div class="p-4">
                  <div class="mb-3">
                    <textarea
                      placeholder="请输入处理记录..."
                      rows="3"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200 mb-2"
                    ></textarea>
                    <div class="flex justify-between">
                      <div class="flex">
                        <button
                          class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-500 mr-2"
                        >
                          <i class="fas fa-camera mr-1"></i> 添加照片
                        </button>
                        <button
                          class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-500"
                        >
                          <i class="fas fa-paperclip mr-1"></i> 添加附件
                        </button>
                      </div>
                      <button
                        class="text-xs px-3 py-1 rounded bg-green-500 text-white"
                      >
                        提交记录
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="flex space-x-3 mb-6">
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white bg-blue-500"
                >
                  <i class="fas fa-phone-alt mr-1"></i> 联系上报人
                </button>
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white"
                  style="background-color: var(--primary-color)"
                >
                  <i class="fas fa-check-circle mr-1"></i> 标记完成
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 网格巡查界面 -->
        <div>
          <div class="prototype-title">网格巡查</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">网格巡查</div>
              </div>
              <div class="flex">
                <i class="fas fa-history text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-center mb-4">
                    <div class="text-lg font-semibold mb-1">今日巡查</div>
                    <div class="text-sm text-gray-500">
                      2023年6月16日 星期五
                    </div>
                  </div>
                  <div class="flex justify-center mb-6">
                    <div class="relative">
                      <div
                        class="w-32 h-32 rounded-full bg-green-50 flex items-center justify-center"
                        style="border: 4px solid var(--primary-color)"
                      >
                        <div class="text-center">
                          <div
                            class="text-xl font-bold"
                            style="color: var(--primary-color)"
                          >
                            0/3
                          </div>
                          <div class="text-xs text-gray-500">巡查点位</div>
                        </div>
                      </div>
                      <div
                        class="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white"
                      >
                        <i class="fas fa-map-marker-alt"></i>
                      </div>
                    </div>
                  </div>
                  <button
                    class="w-full py-3 rounded-lg font-medium text-white mb-4"
                    style="background-color: var(--primary-color)"
                  >
                    <i class="fas fa-play-circle mr-2"></i> 开始巡查
                  </button>
                </div>
              </div>

              <div class="section-title">巡查点位</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon bg-gray-100">
                    <i class="fas fa-map-marker-alt text-gray-500"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖小区3栋</div>
                    <div class="list-item-desc">距离: 约500米</div>
                  </div>
                  <div class="tag tag-default">未巡查</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-gray-100">
                    <i class="fas fa-map-marker-alt text-gray-500"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区公园</div>
                    <div class="list-item-desc">距离: 约800米</div>
                  </div>
                  <div class="tag tag-default">未巡查</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-gray-100">
                    <i class="fas fa-map-marker-alt text-gray-500"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区卫生服务站</div>
                    <div class="list-item-desc">距离: 约1.2公里</div>
                  </div>
                  <div class="tag tag-default">未巡查</div>
                </div>
              </div>

              <div class="section-title">巡查统计</div>
              <div class="card">
                <div class="grid grid-cols-3 gap-4 p-4">
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      18
                    </div>
                    <div class="text-xs text-gray-500">本周巡查</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      5
                    </div>
                    <div class="text-xs text-gray-500">发现问题</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      4
                    </div>
                    <div class="text-xs text-gray-500">已解决</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 巡查记录界面 -->
        <div>
          <div class="prototype-title">巡查记录</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">巡查记录</div>
              </div>
              <div class="flex">
                <i class="fas fa-calendar-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="section-title">2023年6月</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-06-15 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：1个，已解决：1个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-06-14 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：0个，已解决：0个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-06-13 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：1个，已解决：1个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-06-12 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：2个，已解决：1个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="section-title">2023年5月</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-05-31 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：0个，已解决：0个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区巡查</div>
                    <div class="list-item-desc">2023-05-30 · 3个点位</div>
                    <div class="text-xs text-gray-500 mt-1">
                      发现问题：1个，已解决：1个
                    </div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 信访管理界面 -->
        <div>
          <div class="prototype-title">信访管理</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">信访管理</div>
              </div>
              <div class="flex">
                <i class="fas fa-plus text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  全部信访
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">待处理</div>
                <div class="flex-1 text-center py-2 text-gray-500">已处理</div>
              </div>

              <div class="search-bar mb-4">
                <i class="fas fa-search"></i>
                <input
                  type="text"
                  placeholder="搜索信访事项"
                  class="search-input"
                />
              </div>

              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon bg-orange-100 text-orange-500">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于东湖小区噪音扰民问题</div>
                    <div class="list-item-desc">李明 · 2023-06-15</div>
                    <div class="text-xs text-gray-500 mt-1">
                      东湖小区5栋附近施工噪音严重，影响居民休息
                    </div>
                  </div>
                  <div class="tag tag-warning">处理中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-orange-100 text-orange-500">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于西湖公园健身设施维修</div>
                    <div class="list-item-desc">王芳 · 2023-06-12</div>
                    <div class="text-xs text-gray-500 mt-1">
                      西湖公园健身设施损坏，希望尽快修复
                    </div>
                  </div>
                  <div class="tag tag-warning">处理中</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于南湖社区路灯维修</div>
                    <div class="list-item-desc">张伟 · 2023-06-08</div>
                    <div class="text-xs text-gray-500 mt-1">
                      南湖社区5号楼前路灯不亮，夜间存在安全隐患
                    </div>
                  </div>
                  <div class="tag tag-success">已解决</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon bg-green-100 text-green-500">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于北湖小区垃圾清理</div>
                    <div class="list-item-desc">赵丽 · 2023-06-05</div>
                    <div class="text-xs text-gray-500 mt-1">
                      北湖小区2号垃圾站垃圾堆积，未及时清理
                    </div>
                  </div>
                  <div class="tag tag-success">已解决</div>
                </div>
              </div>

              <div class="section-title">信访统计</div>
              <div class="card">
                <div class="grid grid-cols-3 gap-4 p-4">
                  <div class="text-center">
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      10
                    </div>
                    <div class="text-xs text-gray-500">本月信访</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xl font-bold" style="color: #e6a23c">
                      4
                    </div>
                    <div class="text-xs text-gray-500">处理中</div>
                  </div>
                  <div class="text-center">
                    <div class="text-xl font-bold" style="color: #67c23a">
                      6
                    </div>
                    <div class="text-xs text-gray-500">已解决</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 信访详情界面 -->
        <div>
          <div class="prototype-title">信访详情</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">信访详情</div>
              </div>
              <div class="flex">
                <i class="fas fa-share-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="flex items-center mb-3">
                    <div class="tag tag-warning mr-2">处理中</div>
                    <div class="text-xl font-semibold">
                      关于东湖小区噪音扰民问题
                    </div>
                  </div>
                  <div class="flex items-center mb-4">
                    <div class="text-sm text-gray-500">
                      上报时间: 2023-06-15 09:15
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">信访内容</div>
                    <div class="text-sm">
                      东湖小区5栋附近正在进行道路施工，从早上7点开始就有噪音，影响居民休息和工作。希望能够合理安排施工时间，避免早晚休息时间施工，或者采取降噪措施。
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">信访位置</div>
                    <div class="text-sm">东湖小区5栋附近</div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">信访人</div>
                    <div class="flex items-center">
                      <div class="avatar mr-2">李</div>
                      <div>
                        <div class="text-sm font-medium">李明</div>
                        <div class="text-xs text-gray-500">
                          居民 | 139****1234
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">现场照片</div>
                    <div class="grid grid-cols-3 gap-2">
                      <div class="bg-gray-100 rounded-lg h-20"></div>
                      <div class="bg-gray-100 rounded-lg h-20"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">处理进度</div>
              <div class="card mb-6">
                <div class="p-4">
                  <div class="relative">
                    <div
                      class="absolute left-2 top-0 bottom-0 w-0.5 bg-gray-200"
                    ></div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">信访受理</div>
                      <div class="text-xs text-gray-500">2023-06-15 09:15</div>
                      <div class="text-xs text-gray-500 mt-1">
                        居民李明提交了信访申请
                      </div>
                    </div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">初步调查</div>
                      <div class="text-xs text-gray-500">2023-06-15 10:30</div>
                      <div class="text-xs text-gray-500 mt-1">
                        网格员张明前往现场调查，确认施工噪音情况
                      </div>
                    </div>
                    <div class="relative pl-8 pb-6">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-green-500 flex items-center justify-center"
                      >
                        <i class="fas fa-check text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">协调处理</div>
                      <div class="text-xs text-gray-500">2023-06-15 14:00</div>
                      <div class="text-xs text-gray-500 mt-1">
                        与施工方沟通，要求调整施工时间，增加降噪措施
                      </div>
                    </div>
                    <div class="relative pl-8">
                      <div
                        class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center"
                      >
                        <i class="fas fa-sync-alt text-white text-xs"></i>
                      </div>
                      <div class="text-sm font-medium mb-1">跟踪回访</div>
                      <div class="text-xs text-gray-500">进行中</div>
                      <div class="text-xs text-gray-500 mt-1">
                        计划于6月17日回访，确认整改效果
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">处理记录</div>
              <div class="card mb-6">
                <div class="p-4">
                  <div class="mb-3">
                    <textarea
                      placeholder="请输入处理记录..."
                      rows="3"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200 mb-2"
                    ></textarea>
                    <div class="flex justify-between">
                      <div class="flex">
                        <button
                          class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-500 mr-2"
                        >
                          <i class="fas fa-camera mr-1"></i> 添加照片
                        </button>
                        <button
                          class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-500"
                        >
                          <i class="fas fa-paperclip mr-1"></i> 添加附件
                        </button>
                      </div>
                      <button
                        class="text-xs px-3 py-1 rounded bg-green-500 text-white"
                      >
                        提交记录
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="flex space-x-3 mb-6">
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white bg-blue-500"
                >
                  <i class="fas fa-phone-alt mr-1"></i> 联系信访人
                </button>
                <button
                  class="flex-1 py-2 rounded-lg font-medium text-white"
                  style="background-color: var(--primary-color)"
                >
                  <i class="fas fa-check-circle mr-1"></i> 标记完成
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 任务详情界面 -->
        <div>
          <div class="prototype-title">任务详情</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">任务详情</div>
              </div>
              <div class="flex">
                <i class="fas fa-ellipsis-v text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card">
                <div class="text-xl font-semibold mb-2">
                  东湖社区人口信息采集
                </div>
                <div class="flex items-center mb-4">
                  <div class="tag tag-warning mr-2">进行中</div>
                  <div class="text-sm text-gray-500">截止日期: 2023-06-20</div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">任务进度</div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>已完成: 60%</span>
                    <span>30/50</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner" style="width: 60%"></div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">任务描述</div>
                  <div class="text-sm">
                    对东湖社区居民进行人口信息采集，包括基本信息、居住信息、就业信息等，确保数据准确完整。
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">任务要求</div>
                  <div class="text-sm">
                    1. 确保信息真实准确<br />
                    2. 拍摄清晰的证件照片<br />
                    3. 采集过程中注意保护个人隐私<br />
                    4. 每日上报采集进度
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">负责人</div>
                  <div class="flex items-center">
                    <div class="avatar mr-2">张</div>
                    <div>
                      <div class="text-sm font-medium">张明</div>
                      <div class="text-xs text-gray-500">网格员 | 东湖社区</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">采集记录</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">李明 - 人口信息</div>
                    <div class="list-item-desc">2023-06-15 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">王芳 - 人口信息</div>
                    <div class="list-item-desc">2023-06-14 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">张伟 - 人口信息</div>
                    <div class="list-item-desc">2023-06-13 采集</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <button
                class="w-full py-3 rounded-lg font-medium text-white mb-4"
                style="background-color: var(--primary-color)"
              >
                继续采集
              </button>
            </div>
          </div>
        </div>

        <!-- 我的界面 -->
        <div>
          <div class="prototype-title">我的</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="text-lg font-semibold">我的</div>
              <div class="flex">
                <i class="fas fa-cog text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="flex items-center">
                  <div
                    class="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center mr-4"
                  >
                    <div
                      class="text-xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      张
                    </div>
                  </div>
                  <div>
                    <div class="text-lg font-semibold">张明</div>
                    <div class="text-sm text-gray-500">网格员 | 东湖社区</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400 ml-auto"></i>
                </div>
              </div>

              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-chart-line"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">工作统计</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-history"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">工作记录</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-star"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">我的收藏</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-bell"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">消息通知</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-shield-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">账号安全</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-question-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">帮助中心</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-info-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">关于我们</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <button
                class="w-full py-3 rounded-lg font-medium text-white mt-6"
                style="background-color: #f56c6c"
              >
                退出登录
              </button>
            </div>
            <div class="tab-bar">
              <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>工作台</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-clipboard-list"></i>
                <span>信息采集</span>
              </div>
              <div class="tab-item">
                <i class="fas fa-tasks"></i>
                <span>工作管理</span>
              </div>
              <div class="tab-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 工作统计界面 -->
        <div>
          <div class="prototype-title">工作统计</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">工作统计</div>
              </div>
              <div class="flex">
                <i class="fas fa-calendar-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="flex justify-between mb-4">
                  <div class="text-lg font-semibold">本月工作概览</div>
                  <div class="text-sm text-gray-500">2023年6月</div>
                </div>
                <div class="grid grid-cols-3 gap-4 mb-4">
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      12
                    </div>
                    <div class="text-sm text-gray-500">任务总数</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold" style="color: #67c23a">
                      8
                    </div>
                    <div class="text-sm text-gray-500">已完成</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold" style="color: #e6a23c">
                      4
                    </div>
                    <div class="text-sm text-gray-500">进行中</div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">完成率</div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>66.7%</span>
                    <span>8/12</span>
                  </div>
                  <div class="progress-bar">
                    <div
                      class="progress-bar-inner"
                      style="width: 66.7%; background-color: #67c23a"
                    ></div>
                  </div>
                </div>
              </div>

              <div class="section-title">信息采集统计</div>
              <div class="card mb-6">
                <div class="grid grid-cols-2 gap-4">
                  <div class="text-center p-3 bg-gray-50 rounded-lg">
                    <i
                      class="fas fa-user text-xl mb-2"
                      style="color: var(--primary-color)"
                    ></i>
                    <div class="text-lg font-bold">45</div>
                    <div class="text-sm text-gray-500">人口信息</div>
                  </div>
                  <div class="text-center p-3 bg-gray-50 rounded-lg">
                    <i
                      class="fas fa-home text-xl mb-2"
                      style="color: var(--primary-color)"
                    ></i>
                    <div class="text-lg font-bold">32</div>
                    <div class="text-sm text-gray-500">房屋信息</div>
                  </div>
                  <div class="text-center p-3 bg-gray-50 rounded-lg">
                    <i
                      class="fas fa-store text-xl mb-2"
                      style="color: var(--primary-color)"
                    ></i>
                    <div class="text-lg font-bold">12</div>
                    <div class="text-sm text-gray-500">企业信息</div>
                  </div>
                  <div class="text-center p-3 bg-gray-50 rounded-lg">
                    <i
                      class="fas fa-exclamation-circle text-xl mb-2"
                      style="color: var(--primary-color)"
                    ></i>
                    <div class="text-lg font-bold">7</div>
                    <div class="text-sm text-gray-500">事件信息</div>
                  </div>
                </div>
              </div>

              <div class="section-title">工作效率分析</div>
              <div class="card">
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">日均完成任务</div>
                  <div class="flex items-center">
                    <div class="text-xl font-bold mr-2">3.2</div>
                    <div class="tag tag-success">+15%</div>
                  </div>
                </div>
                <div class="mb-4">
                  <div class="text-sm text-gray-500 mb-1">平均响应时间</div>
                  <div class="flex items-center">
                    <div class="text-xl font-bold mr-2">1.5小时</div>
                    <div class="tag tag-success">-10%</div>
                  </div>
                </div>
                <div>
                  <div class="text-sm text-gray-500 mb-1">任务完成质量</div>
                  <div class="flex items-center">
                    <div class="text-xl font-bold mr-2">4.8/5</div>
                    <div class="tag tag-success">+5%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人信息设置界面 -->
        <div>
          <div class="prototype-title">个人信息设置</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">个人信息</div>
              </div>
              <div class="flex">
                <i class="fas fa-save text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="flex flex-col items-center py-4">
                  <div
                    class="w-20 h-20 rounded-full bg-green-50 flex items-center justify-center mb-3"
                  >
                    <div
                      class="text-2xl font-bold"
                      style="color: var(--primary-color)"
                    >
                      张
                    </div>
                  </div>
                  <div class="text-sm text-gray-500">点击更换头像</div>
                </div>
              </div>

              <div class="card">
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">姓名</div>
                  <div class="flex-1">
                    <input
                      type="text"
                      value="张明"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">性别</div>
                  <div class="flex-1">
                    <select
                      class="w-full border-none p-0 focus:outline-none bg-white"
                    >
                      <option>男</option>
                      <option>女</option>
                    </select>
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">手机号</div>
                  <div class="flex-1">
                    <input
                      type="tel"
                      value="138****5678"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">邮箱</div>
                  <div class="flex-1">
                    <input
                      type="email"
                      value="zhangming@example.com"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">职位</div>
                  <div class="flex-1">
                    <input
                      type="text"
                      value="网格员"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">所属社区</div>
                  <div class="flex-1">
                    <input
                      type="text"
                      value="东湖社区"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
                <div class="list-item">
                  <div class="text-sm text-gray-500 w-20">入职时间</div>
                  <div class="flex-1">
                    <input
                      type="date"
                      value="2022-03-15"
                      class="w-full border-none p-0 focus:outline-none"
                    />
                  </div>
                </div>
              </div>

              <button
                class="w-full py-3 rounded-lg font-medium text-white mt-6"
                style="background-color: var(--primary-color)"
              >
                保存修改
              </button>
            </div>
          </div>
        </div>

        <!-- 账号安全界面 -->
        <div>
          <div class="prototype-title">账号安全</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">账号安全</div>
              </div>
            </div>
            <div class="content">
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-lock"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">修改密码</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-mobile-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">绑定手机</div>
                    <div class="list-item-desc">138****5678</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">绑定邮箱</div>
                    <div class="list-item-desc">zhangming@example.com</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-fingerprint"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">生物识别</div>
                    <div class="list-item-desc">指纹识别、面部识别</div>
                  </div>
                  <div class="flex items-center">
                    <div class="toggle-switch">
                      <input type="checkbox" id="biometric" checked />
                      <label for="biometric"></label>
                    </div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-shield-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">登录保护</div>
                  </div>
                  <div class="flex items-center">
                    <div class="toggle-switch">
                      <input type="checkbox" id="login-protection" checked />
                      <label for="login-protection"></label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="section-title">登录设备</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-mobile-alt"></i>
                  </div>
                  <div class="list-item-icon">
                    <i class="fas fa-mobile-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">iPhone 13 Pro</div>
                    <div class="list-item-desc">当前设备 | 上次登录: 今天</div>
                  </div>
                  <div class="tag tag-success">当前</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-laptop"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">MacBook Pro</div>
                    <div class="list-item-desc">上次登录: 2023-06-10</div>
                  </div>
                  <div class="text-sm text-red-500">解除</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-tablet-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">iPad Air</div>
                    <div class="list-item-desc">上次登录: 2023-05-28</div>
                  </div>
                  <div class="text-sm text-red-500">解除</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 消息通知界面 -->
        <div>
          <div class="prototype-title">消息通知</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">消息通知</div>
              </div>
              <div class="flex">
                <i class="fas fa-check-double text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  系统通知
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  工作消息
                </div>
              </div>

              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-bell"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">系统更新通知</div>
                    <div class="list-item-desc">
                      数字乡村App已更新至v2.3.0版本，新增多项功能...
                    </div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-16 09:30
                    </div>
                  </div>
                  <div class="w-2 h-2 rounded-full bg-red-500"></div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-bullhorn"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">工作安排变更</div>
                    <div class="list-item-desc">
                      关于东湖社区人口信息采集工作时间调整的通知
                    </div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-15 14:20
                    </div>
                  </div>
                  <div class="w-2 h-2 rounded-full bg-red-500"></div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-calendar-check"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">任务提醒</div>
                    <div class="list-item-desc">
                      您有一项"安全隐患排查"任务即将到期，请尽快完成
                    </div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-14 10:15
                    </div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-user-shield"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">账号安全提醒</div>
                    <div class="list-item-desc">
                      您的账号于2023-06-12在新设备上登录，请确认是否为本人操作
                    </div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-12 16:45
                    </div>
                  </div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-award"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">工作表彰</div>
                    <div class="list-item-desc">
                      恭喜您在5月份工作考核中获得"优秀网格员"称号
                    </div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-01 11:30
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 帮助中心界面 -->
        <div>
          <div class="prototype-title">帮助中心</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">帮助中心</div>
              </div>
            </div>
            <div class="content">
              <div class="mb-4">
                <div class="relative">
                  <input
                    type="text"
                    placeholder="搜索问题"
                    class="w-full py-2 px-4 pr-10 rounded-lg border border-gray-200"
                  />
                  <i
                    class="fas fa-search absolute right-3 top-3 text-gray-400"
                  ></i>
                </div>
              </div>

              <div class="section-title">常见问题</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-question-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">如何使用信息采集功能？</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-question-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">如何查看工作统计数据？</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-question-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">忘记密码怎么办？</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-question-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">如何提交工作反馈？</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="section-title">使用指南</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-book"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">新手入门指南</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-book"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">信息采集操作手册</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-book"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">工作管理使用指南</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="section-title">联系我们</div>
              <div class="card">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-headset"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">在线客服</div>
                    <div class="list-item-desc">工作时间: 9:00-18:00</div>
                  </div>
                  <button
                    class="px-3 py-1 rounded text-white text-sm"
                    style="background-color: var(--primary-color)"
                  >
                    咨询
                  </button>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-phone-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">客服热线</div>
                    <div class="list-item-desc">400-123-4567</div>
                  </div>
                  <button
                    class="px-3 py-1 rounded text-white text-sm"
                    style="background-color: var(--primary-color)"
                  >
                    拨打
                  </button>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-envelope"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">意见反馈</div>
                    <div class="list-item-desc">feedback@example.com</div>
                  </div>
                  <button
                    class="px-3 py-1 rounded text-white text-sm"
                    style="background-color: var(--primary-color)"
                  >
                    反馈
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 关于我们界面 -->
        <div>
          <div class="prototype-title">关于我们</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">关于我们</div>
              </div>
            </div>
            <div class="content">
              <div class="flex flex-col items-center mb-6 py-6">
                <div
                  class="w-20 h-20 rounded-lg bg-green-50 flex items-center justify-center mb-3"
                >
                  <i
                    class="fas fa-leaf text-3xl"
                    style="color: var(--primary-color)"
                  ></i>
                </div>
                <div class="text-lg font-semibold mb-1">数字乡村App</div>
                <div class="text-sm text-gray-500">版本 2.3.0</div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">应用简介</div>
                  <div class="text-sm text-gray-600 leading-relaxed">
                    数字乡村App是一款专为乡村基层工作人员设计的综合性工作平台，旨在通过数字化手段提升乡村治理效能，助力乡村振兴战略实施。平台集信息采集、工作管理、数据分析等功能于一体，为基层工作提供全方位的数字化支持。
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-file-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">用户协议</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-shield-alt"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">隐私政策</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">版权信息</div>
                  </div>
                  <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
              </div>

              <div class="card">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">联系方式</div>
                  <div class="text-sm text-gray-600 mb-2">
                    <i class="fas fa-phone-alt mr-2"></i> 400-123-4567
                  </div>
                  <div class="text-sm text-gray-600 mb-2">
                    <i class="fas fa-envelope mr-2"></i> contact@example.com
                  </div>
                  <div class="text-sm text-gray-600">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    北京市海淀区中关村南大街5号
                  </div>
                </div>
              </div>

              <div class="text-center text-xs text-gray-400 mt-6">
                Copyright © 2023 数字乡村App. All Rights Reserved.
              </div>
            </div>
          </div>
        </div>

        <!-- 修改密码界面 -->
        <div>
          <div class="prototype-title">修改密码</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">修改密码</div>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">当前密码</div>
                    <input
                      type="password"
                      placeholder="请输入当前密码"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">新密码</div>
                    <input
                      type="password"
                      placeholder="请输入新密码"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                    <div class="text-xs text-gray-400 mt-1">
                      密码长度8-20位，包含字母、数字和特殊字符
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">确认新密码</div>
                    <input
                      type="password"
                      placeholder="请再次输入新密码"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-sm font-medium mb-3">密码强度</div>
                  <div class="flex space-x-1 mb-2">
                    <div class="flex-1 h-1 rounded-full bg-green-500"></div>
                    <div class="flex-1 h-1 rounded-full bg-green-500"></div>
                    <div class="flex-1 h-1 rounded-full bg-green-500"></div>
                    <div class="flex-1 h-1 rounded-full bg-gray-200"></div>
                  </div>
                  <div class="text-xs text-gray-500">强度：较强</div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-sm font-medium mb-3">安全提示</div>
                  <div class="text-xs text-gray-600">
                    <div class="flex items-start mb-2">
                      <i
                        class="fas fa-check-circle text-green-500 mt-0.5 mr-2"
                      ></i>
                      <div>定期更换密码可以提高账号安全性</div>
                    </div>
                    <div class="flex items-start mb-2">
                      <i
                        class="fas fa-check-circle text-green-500 mt-0.5 mr-2"
                      ></i>
                      <div>请勿使用与其他网站相同的密码</div>
                    </div>
                    <div class="flex items-start">
                      <i
                        class="fas fa-check-circle text-green-500 mt-0.5 mr-2"
                      ></i>
                      <div>
                        密码修改成功后，系统将自动退出，请使用新密码重新登录
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <button
                class="w-full py-3 rounded-lg font-medium text-white"
                style="background-color: var(--primary-color)"
              >
                确认修改
              </button>
            </div>
          </div>
        </div>

        <!-- 工作记录界面 -->
        <div>
          <div class="prototype-title">工作记录</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">工作记录</div>
              </div>
              <div class="flex">
                <i class="fas fa-filter text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  全部
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  信息采集
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  事件处理
                </div>
              </div>

              <div class="section-title">2023年6月</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-clipboard-list"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">东湖社区人口信息采集</div>
                    <div class="list-item-desc">采集完成：45户，共计132人</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-15 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-exclamation-circle"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">安全隐患排查</div>
                    <div class="list-item-desc">排查区域：东湖社区1-3号楼</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-12 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-home"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">老旧小区改造调研</div>
                    <div class="list-item-desc">调研对象：东湖社区居民</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-06-08 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
              </div>

              <div class="section-title">2023年5月</div>
              <div class="card mb-6">
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-store"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">小微企业信息采集</div>
                    <div class="list-item-desc">采集完成：12家企业</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-05-25 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-users"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区居民满意度调查</div>
                    <div class="list-item-desc">调查对象：东湖社区居民</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-05-18 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
                <div class="list-item">
                  <div class="list-item-icon">
                    <i class="fas fa-seedling"></i>
                  </div>
                  <div class="list-item-content">
                    <div class="list-item-title">社区绿化改造项目跟进</div>
                    <div class="list-item-desc">项目地点：东湖社区公园</div>
                    <div class="text-xs text-gray-400 mt-1">
                      2023-05-10 完成
                    </div>
                  </div>
                  <div class="tag tag-success">已完成</div>
                </div>
              </div>

              <div class="text-center py-4">
                <button
                  class="text-sm text-gray-500 flex items-center justify-center mx-auto"
                >
                  <i class="fas fa-sync-alt mr-1"></i> 加载更多
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 信息采集表单界面 -->
        <div>
          <div class="prototype-title">信息采集表单</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">人口信息采集</div>
              </div>
              <div class="flex">
                <i class="fas fa-save text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">基本信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      姓名 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="text"
                      placeholder="请输入姓名"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      性别 <span class="text-red-500">*</span>
                    </div>
                    <div class="flex space-x-4">
                      <div class="flex items-center">
                        <input
                          type="radio"
                          id="male"
                          name="gender"
                          class="mr-2"
                        />
                        <label for="male">男</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          type="radio"
                          id="female"
                          name="gender"
                          class="mr-2"
                        />
                        <label for="female">女</label>
                      </div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      出生日期 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="date"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      身份证号 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="text"
                      placeholder="请输入身份证号"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">民族</div>
                    <select
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    >
                      <option>汉族</option>
                      <option>蒙古族</option>
                      <option>回族</option>
                      <option>藏族</option>
                      <option>维吾尔族</option>
                      <option>苗族</option>
                      <option>其他</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">联系方式</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      手机号码 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="tel"
                      placeholder="请输入手机号码"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">固定电话</div>
                    <input
                      type="tel"
                      placeholder="请输入固定电话"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">电子邮箱</div>
                    <input
                      type="email"
                      placeholder="请输入电子邮箱"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">居住信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      户籍地址 <span class="text-red-500">*</span>
                    </div>
                    <div class="flex flex-col space-y-2">
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>北京市</option>
                        <option>上海市</option>
                        <option>广东省</option>
                        <option>江苏省</option>
                        <option>浙江省</option>
                      </select>
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>北京市</option>
                      </select>
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>海淀区</option>
                        <option>朝阳区</option>
                        <option>西城区</option>
                        <option>东城区</option>
                      </select>
                      <input
                        type="text"
                        placeholder="详细地址"
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      />
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">现居住地址</div>
                    <div class="flex items-center mb-2">
                      <input type="checkbox" id="same-address" class="mr-2" />
                      <label for="same-address" class="text-sm"
                        >与户籍地址相同</label
                      >
                    </div>
                    <div class="flex flex-col space-y-2">
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>北京市</option>
                        <option>上海市</option>
                        <option>广东省</option>
                        <option>江苏省</option>
                        <option>浙江省</option>
                      </select>
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>北京市</option>
                      </select>
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>海淀区</option>
                        <option>朝阳区</option>
                        <option>西城区</option>
                        <option>东城区</option>
                      </select>
                      <input
                        type="text"
                        placeholder="详细地址"
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">其他信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">文化程度</div>
                    <select
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    >
                      <option>小学</option>
                      <option>初中</option>
                      <option>高中/中专</option>
                      <option>大专</option>
                      <option>本科</option>
                      <option>硕士</option>
                      <option>博士</option>
                    </select>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">职业</div>
                    <input
                      type="text"
                      placeholder="请输入职业"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">婚姻状况</div>
                    <select
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    >
                      <option>未婚</option>
                      <option>已婚</option>
                      <option>离异</option>
                      <option>丧偶</option>
                    </select>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">备注</div>
                    <textarea
                      placeholder="请输入备注信息"
                      rows="3"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    ></textarea>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">附件上传</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">身份证正面照片</div>
                    <div
                      class="border border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center"
                    >
                      <i
                        class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"
                      ></i>
                      <div class="text-sm text-gray-500 mb-1">
                        点击或拖拽文件上传
                      </div>
                      <div class="text-xs text-gray-400">
                        支持JPG、PNG格式，大小不超过2MB
                      </div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">身份证背面照片</div>
                    <div
                      class="border border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center"
                    >
                      <i
                        class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"
                      ></i>
                      <div class="text-sm text-gray-500 mb-1">
                        点击或拖拽文件上传
                      </div>
                      <div class="text-xs text-gray-400">
                        支持JPG、PNG格式，大小不超过2MB
                      </div>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">其他证明材料</div>
                    <div
                      class="border border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center"
                    >
                      <i
                        class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"
                      ></i>
                      <div class="text-sm text-gray-500 mb-1">
                        点击或拖拽文件上传
                      </div>
                      <div class="text-xs text-gray-400">
                        支持JPG、PNG、PDF格式，大小不超过5MB
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="flex space-x-4 mb-6">
                <button
                  class="flex-1 py-3 rounded-lg font-medium text-gray-600 bg-gray-100"
                >
                  保存草稿
                </button>
                <button
                  class="flex-1 py-3 rounded-lg font-medium text-white"
                  style="background-color: var(--primary-color)"
                >
                  提交信息
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 数据统计界面 -->
        <div>
          <div class="prototype-title">数据统计</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">数据统计</div>
              </div>
              <div class="flex">
                <i class="fas fa-calendar-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  本月
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">本季度</div>
                <div class="flex-1 text-center py-2 text-gray-500">本年度</div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-4">工作概览</div>
                  <div class="grid grid-cols-2 gap-4">
                    <div class="bg-green-50 rounded-lg p-3">
                      <div class="text-sm text-gray-500 mb-1">信息采集</div>
                      <div
                        class="text-xl font-bold"
                        style="color: var(--primary-color)"
                      >
                        132
                      </div>
                      <div class="text-xs text-gray-400">条记录</div>
                    </div>
                    <div class="bg-blue-50 rounded-lg p-3">
                      <div class="text-sm text-gray-500 mb-1">事件处理</div>
                      <div class="text-xl font-bold text-blue-500">28</div>
                      <div class="text-xs text-gray-400">个事件</div>
                    </div>
                    <div class="bg-purple-50 rounded-lg p-3">
                      <div class="text-sm text-gray-500 mb-1">走访户数</div>
                      <div class="text-xl font-bold text-purple-500">45</div>
                      <div class="text-xs text-gray-400">户</div>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-3">
                      <div class="text-sm text-gray-500 mb-1">工作时长</div>
                      <div class="text-xl font-bold text-orange-500">86</div>
                      <div class="text-xs text-gray-400">小时</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">信息采集统计</div>
                  <div class="h-48 mb-3">
                    <!-- 这里是图表区域，实际应用中可以使用图表库 -->
                    <div class="h-full flex items-end justify-between px-2">
                      <div class="flex flex-col items-center">
                        <div
                          class="w-6 bg-green-500 rounded-t"
                          style="height: 30%"
                        ></div>
                        <div class="text-xs mt-1">1周</div>
                      </div>
                      <div class="flex flex-col items-center">
                        <div
                          class="w-6 bg-green-500 rounded-t"
                          style="height: 50%"
                        ></div>
                        <div class="text-xs mt-1">2周</div>
                      </div>
                      <div class="flex flex-col items-center">
                        <div
                          class="w-6 bg-green-500 rounded-t"
                          style="height: 70%"
                        ></div>
                        <div class="text-xs mt-1">3周</div>
                      </div>
                      <div class="flex flex-col items-center">
                        <div
                          class="w-6 bg-green-500 rounded-t"
                          style="height: 40%"
                        ></div>
                        <div class="text-xs mt-1">4周</div>
                      </div>
                    </div>
                  </div>
                  <div class="flex justify-between text-sm text-gray-500">
                    <div>总计: 132条</div>
                    <div>环比: <span class="text-green-500">+12.5%</span></div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">事件处理统计</div>
                  <div class="flex mb-4">
                    <div class="flex-1">
                      <div class="relative pt-1">
                        <div class="text-xs text-gray-500 mb-1">
                          已处理 (85%)
                        </div>
                        <div
                          class="overflow-hidden h-2 text-xs flex rounded bg-gray-200"
                        >
                          <div
                            style="
                              width: 85%;
                              background-color: var(--primary-color);
                            "
                            class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center"
                          ></div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="w-16 text-right text-sm font-medium"
                      style="color: var(--primary-color)"
                    >
                      24
                    </div>
                  </div>
                  <div class="flex mb-4">
                    <div class="flex-1">
                      <div class="relative pt-1">
                        <div class="text-xs text-gray-500 mb-1">
                          处理中 (10%)
                        </div>
                        <div
                          class="overflow-hidden h-2 text-xs flex rounded bg-gray-200"
                        >
                          <div
                            style="width: 10%"
                            class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
                          ></div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="w-16 text-right text-sm font-medium text-yellow-500"
                    >
                      3
                    </div>
                  </div>
                  <div class="flex mb-4">
                    <div class="flex-1">
                      <div class="relative pt-1">
                        <div class="text-xs text-gray-500 mb-1">
                          未处理 (5%)
                        </div>
                        <div
                          class="overflow-hidden h-2 text-xs flex rounded bg-gray-200"
                        >
                          <div
                            style="width: 5%"
                            class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
                          ></div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="w-16 text-right text-sm font-medium text-red-500"
                    >
                      1
                    </div>
                  </div>
                  <div class="text-xs text-gray-500 mt-2">
                    平均处理时间: 2.5小时
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="flex justify-between items-center mb-3">
                    <div class="text-lg font-semibold">工作效率分析</div>
                    <div class="text-sm text-gray-500">本月</div>
                  </div>
                  <div class="flex items-center mb-4">
                    <div
                      class="w-16 h-16 rounded-full flex items-center justify-center mr-4"
                      style="background-color: rgba(16, 185, 129, 0.1)"
                    >
                      <div
                        class="text-xl font-bold"
                        style="color: var(--primary-color)"
                      >
                        92
                      </div>
                    </div>
                    <div>
                      <div class="text-sm font-medium mb-1">工作效率评分</div>
                      <div class="text-xs text-gray-500">
                        较上月 <span class="text-green-500">+5分</span>
                      </div>
                    </div>
                  </div>
                  <div class="space-y-3">
                    <div>
                      <div class="flex justify-between text-sm mb-1">
                        <div>信息采集速度</div>
                        <div>9.5条/天</div>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div
                          class="bg-green-500 h-1.5 rounded-full"
                          style="width: 95%"
                        ></div>
                      </div>
                    </div>
                    <div>
                      <div class="flex justify-between text-sm mb-1">
                        <div>事件处理速度</div>
                        <div>2.5小时/件</div>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div
                          class="bg-green-500 h-1.5 rounded-full"
                          style="width: 85%"
                        ></div>
                      </div>
                    </div>
                    <div>
                      <div class="flex justify-between text-sm mb-1">
                        <div>工作准确率</div>
                        <div>98.2%</div>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-1.5">
                        <div
                          class="bg-green-500 h-1.5 rounded-full"
                          style="width: 98%"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">工作区域分布</div>
                  <div class="h-48 mb-3 flex items-center justify-center">
                    <!-- 这里是饼图区域，实际应用中可以使用图表库 -->
                    <div
                      class="w-32 h-32 rounded-full border-8 border-green-500 relative"
                    >
                      <div
                        class="absolute top-0 left-0 w-full h-full border-8 border-transparent border-t-blue-500 border-r-blue-500 rounded-full"
                        style="transform: rotate(135deg)"
                      ></div>
                      <div
                        class="absolute top-0 left-0 w-full h-full border-8 border-transparent border-t-yellow-500 rounded-full"
                        style="transform: rotate(225deg)"
                      ></div>
                    </div>
                  </div>
                  <div class="space-y-2">
                    <div class="flex items-center">
                      <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                      <div class="text-sm">东湖社区 (60%)</div>
                    </div>
                    <div class="flex items-center">
                      <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                      <div class="text-sm">西山社区 (25%)</div>
                    </div>
                    <div class="flex items-center">
                      <div
                        class="w-3 h-3 rounded-full bg-yellow-500 mr-2"
                      ></div>
                      <div class="text-sm">南苑社区 (15%)</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 事件上报界面 -->
        <div>
          <div class="prototype-title">事件上报</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">事件上报</div>
              </div>
              <div class="flex">
                <i class="fas fa-save text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">基本信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      事件类型 <span class="text-red-500">*</span>
                    </div>
                    <select
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    >
                      <option>安全隐患</option>
                      <option>环境卫生</option>
                      <option>基础设施</option>
                      <option>邻里纠纷</option>
                      <option>其他问题</option>
                    </select>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      事件标题 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="text"
                      placeholder="请输入事件标题"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      事件描述 <span class="text-red-500">*</span>
                    </div>
                    <textarea
                      placeholder="请详细描述事件情况"
                      rows="4"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    ></textarea>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">事件等级</div>
                    <div class="flex space-x-4">
                      <div class="flex items-center">
                        <input
                          type="radio"
                          id="level-low"
                          name="level"
                          class="mr-2"
                        />
                        <label for="level-low">低</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          type="radio"
                          id="level-medium"
                          name="level"
                          class="mr-2"
                        />
                        <label for="level-medium">中</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          type="radio"
                          id="level-high"
                          name="level"
                          class="mr-2"
                        />
                        <label for="level-high">高</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">位置信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      所在区域 <span class="text-red-500">*</span>
                    </div>
                    <div class="flex flex-col space-y-2">
                      <select
                        class="w-full py-2 px-3 rounded-lg border border-gray-200"
                      >
                        <option>东湖社区</option>
                        <option>西山社区</option>
                        <option>南苑社区</option>
                      </select>
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      详细地址 <span class="text-red-500">*</span>
                    </div>
                    <input
                      type="text"
                      placeholder="请输入详细地址"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">地理位置</div>
                    <div class="flex items-center justify-between mb-2">
                      <div class="text-xs text-gray-400">点击获取当前位置</div>
                      <button
                        class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600"
                      >
                        获取位置
                      </button>
                    </div>
                    <div
                      class="bg-gray-50 p-2 rounded-lg text-xs text-gray-500"
                    >
                      北京市海淀区西土城路10号 (116.36721, 39.95933)
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">地图标记</div>
                    <div
                      class="h-40 bg-gray-100 rounded-lg flex items-center justify-center"
                    >
                      <div class="text-center">
                        <i
                          class="fas fa-map-marker-alt text-2xl text-gray-400 mb-2"
                        ></i>
                        <div class="text-xs text-gray-500">地图加载中...</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">现场照片</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">
                      上传照片 <span class="text-red-500">*</span>
                    </div>
                    <div class="grid grid-cols-3 gap-2 mb-2">
                      <div
                        class="border border-dashed border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center aspect-square"
                      >
                        <i class="fas fa-plus text-xl text-gray-400"></i>
                      </div>
                      <div
                        class="relative rounded-lg overflow-hidden aspect-square"
                      >
                        <img
                          src="https://via.placeholder.com/100"
                          class="w-full h-full object-cover"
                        />
                        <div
                          class="absolute top-1 right-1 w-5 h-5 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
                        >
                          <i class="fas fa-times text-white text-xs"></i>
                        </div>
                      </div>
                      <div
                        class="relative rounded-lg overflow-hidden aspect-square"
                      >
                        <img
                          src="https://via.placeholder.com/100"
                          class="w-full h-full object-cover"
                        />
                        <div
                          class="absolute top-1 right-1 w-5 h-5 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
                        >
                          <i class="fas fa-times text-white text-xs"></i>
                        </div>
                      </div>
                    </div>
                    <div class="text-xs text-gray-400">
                      最多可上传9张照片，每张不超过5MB
                    </div>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">视频记录</div>
                    <div
                      class="border border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center"
                    >
                      <i class="fas fa-video text-2xl text-gray-400 mb-2"></i>
                      <div class="text-sm text-gray-500 mb-1">
                        点击录制或上传视频
                      </div>
                      <div class="text-xs text-gray-400">
                        支持MP4格式，大小不超过50MB，时长不超过3分钟
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">联系人信息</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">联系人</div>
                    <input
                      type="text"
                      placeholder="请输入联系人姓名"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">联系电话</div>
                    <input
                      type="tel"
                      placeholder="请输入联系电话"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    />
                  </div>
                  <div class="flex items-center">
                    <input type="checkbox" id="anonymous" class="mr-2" />
                    <label for="anonymous" class="text-sm">匿名上报</label>
                  </div>
                </div>
              </div>

              <div class="flex space-x-4 mb-6">
                <button
                  class="flex-1 py-3 rounded-lg font-medium text-gray-600 bg-gray-100"
                >
                  保存草稿
                </button>
                <button
                  class="flex-1 py-3 rounded-lg font-medium text-white"
                  style="background-color: var(--primary-color)"
                >
                  提交上报
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 事件详情界面 -->
        <div>
          <div class="prototype-title">事件详情</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">事件详情</div>
              </div>
              <div class="flex">
                <i class="fas fa-share-alt text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="card mb-6">
                <div class="p-4">
                  <div class="flex items-center justify-between mb-3">
                    <div class="text-lg font-semibold">小区路灯损坏</div>
                    <div class="tag tag-warning">处理中</div>
                  </div>
                  <div class="text-sm text-gray-500 mb-3">
                    <div class="flex items-center mb-1">
                      <i class="fas fa-tag mr-2 text-gray-400"></i>
                      <span>基础设施</span>
                    </div>
                    <div class="flex items-center mb-1">
                      <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
                      <span>东湖社区3号楼前广场</span>
                    </div>
                    <div class="flex items-center">
                      <i class="fas fa-clock mr-2 text-gray-400"></i>
                      <span>2023-06-18 19:42:30</span>
                    </div>
                  </div>
                  <div class="text-sm mb-4">
                    东湖社区3号楼前的两盏路灯已经损坏三天，晚上小区很暗，存在安全隐患，希望能尽快修复。
                  </div>
                  <div class="grid grid-cols-3 gap-2 mb-2">
                    <div class="rounded-lg overflow-hidden aspect-square">
                      <img
                        src="https://via.placeholder.com/100"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div class="rounded-lg overflow-hidden aspect-square">
                      <img
                        src="https://via.placeholder.com/100"
                        class="w-full h-full object-cover"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">处理进度</div>
                  <div class="relative pb-12">
                    <div
                      class="absolute h-full left-5 top-0 border-l-2 border-green-500"
                    ></div>

                    <div class="flex mb-6 relative">
                      <div
                        class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white z-10"
                      >
                        <i class="fas fa-check"></i>
                      </div>
                      <div class="ml-4">
                        <div class="font-medium">已受理</div>
                        <div class="text-xs text-gray-500 mt-1">
                          2023-06-18 20:15:42
                        </div>
                        <div class="text-sm mt-1">
                          您的事件已受理，我们将尽快处理。
                        </div>
                      </div>
                    </div>

                    <div class="flex mb-6 relative">
                      <div
                        class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white z-10"
                      >
                        <i class="fas fa-tools"></i>
                      </div>
                      <div class="ml-4">
                        <div class="font-medium">处理中</div>
                        <div class="text-xs text-gray-500 mt-1">
                          2023-06-19 09:30:15
                        </div>
                        <div class="text-sm mt-1">
                          维修人员已安排，预计今日下午到达现场进行维修。
                        </div>
                      </div>
                    </div>

                    <div class="flex relative">
                      <div
                        class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400 z-10"
                      >
                        <i class="fas fa-flag-checkered"></i>
                      </div>
                      <div class="ml-4">
                        <div class="font-medium text-gray-400">待完成</div>
                        <div class="text-xs text-gray-400 mt-1">
                          预计 2023-06-19 完成
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">处理反馈</div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">反馈内容</div>
                    <textarea
                      placeholder="请输入您对处理结果的反馈意见"
                      rows="3"
                      class="w-full py-2 px-3 rounded-lg border border-gray-200"
                    ></textarea>
                  </div>
                  <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-1">满意度评价</div>
                    <div class="flex space-x-4 text-2xl text-gray-300">
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                    </div>
                  </div>
                  <button
                    class="w-full py-2 rounded-lg font-medium text-white"
                    style="background-color: var(--primary-color)"
                  >
                    提交反馈
                  </button>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">相关事件</div>
                  <div class="space-y-3">
                    <div class="flex items-center">
                      <div
                        class="w-2 h-2 rounded-full bg-yellow-500 mr-2"
                      ></div>
                      <div class="text-sm flex-1">东湖社区健身设施损坏</div>
                      <div class="text-xs text-gray-500">06-15</div>
                    </div>
                    <div class="flex items-center">
                      <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                      <div class="text-sm flex-1">东湖社区垃圾分类设施更新</div>
                      <div class="text-xs text-gray-500">06-10</div>
                    </div>
                    <div class="flex items-center">
                      <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                      <div class="text-sm flex-1">东湖社区路面修缮工程</div>
                      <div class="text-xs text-gray-500">05-28</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 消息通知界面 -->
        <div>
          <div class="prototype-title">消息通知</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="nav-bar">
              <div class="flex items-center">
                <i class="fas fa-chevron-left text-gray-600 mr-2"></i>
                <div class="text-lg font-semibold">消息通知</div>
              </div>
              <div class="flex">
                <i class="fas fa-check-double text-gray-600"></i>
              </div>
            </div>
            <div class="content">
              <div class="flex mb-4">
                <div
                  class="flex-1 text-center py-2 border-b-2 border-green-500 font-medium"
                  style="color: var(--primary-color)"
                >
                  系统通知
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  事件通知
                </div>
                <div class="flex-1 text-center py-2 text-gray-500">
                  工作提醒
                </div>
              </div>

              <div class="space-y-4">
                <div class="card">
                  <div class="p-4">
                    <div class="flex items-start">
                      <div
                        class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"
                        style="color: var(--primary-color)"
                      >
                        <i class="fas fa-bell"></i>
                      </div>
                      <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                          <div class="font-medium">系统更新通知</div>
                          <div class="text-xs text-gray-500">10:30</div>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">
                          数字乡村App已更新到最新版本v2.5.0，新增多项功能和优化体验，请及时更新。
                        </div>
                        <div class="text-xs text-gray-400">2023-06-20</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-start">
                      <div
                        class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 text-blue-500"
                      >
                        <i class="fas fa-info-circle"></i>
                      </div>
                      <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                          <div class="font-medium">账号安全提醒</div>
                          <div class="text-xs text-gray-500">昨天</div>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">
                          您的账号已超过30天未修改密码，为了账号安全，建议定期修改密码。
                        </div>
                        <div class="text-xs text-gray-400">2023-06-19</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-start">
                      <div
                        class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 text-purple-500"
                      >
                        <i class="fas fa-bullhorn"></i>
                      </div>
                      <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                          <div class="font-medium">社区活动通知</div>
                          <div class="text-xs text-gray-500">06-18</div>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">
                          东湖社区将于本周六上午9点举办"邻里互助日"活动，欢迎居民积极参与。
                        </div>
                        <div class="flex justify-between items-center">
                          <div class="text-xs text-gray-400">2023-06-18</div>
                          <button
                            class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600"
                          >
                            查看详情
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-start">
                      <div
                        class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3 text-yellow-500"
                      >
                        <i class="fas fa-exclamation-triangle"></i>
                      </div>
                      <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                          <div class="font-medium">天气预警</div>
                          <div class="text-xs text-gray-500">06-15</div>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">
                          气象部门发布暴雨预警，预计今明两天有强降雨，请做好防范工作。
                        </div>
                        <div class="text-xs text-gray-400">2023-06-15</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-start">
                      <div
                        class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"
                        style="color: var(--primary-color)"
                      >
                        <i class="fas fa-check-circle"></i>
                      </div>
                      <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                          <div class="font-medium">信息审核通过</div>
                          <div class="text-xs text-gray-500">06-12</div>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">
                          您提交的居民信息已审核通过，感谢您的贡献。
                        </div>
                        <div class="text-xs text-gray-400">2023-06-12</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人中心界面 -->
        <div>
          <div class="prototype-title">个人中心</div>
          <div class="app-container">
            <div class="status-bar">
              <span>9:41</span>
              <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
              </div>
            </div>
            <div class="content pt-0">
              <div class="relative mb-6">
                <div
                  class="h-40 w-full"
                  style="background-color: var(--primary-color)"
                ></div>
                <div
                  class="absolute left-0 right-0 top-16 flex flex-col items-center"
                >
                  <div
                    class="w-20 h-20 rounded-full border-4 border-white bg-white overflow-hidden"
                  >
                    <img
                      src="https://via.placeholder.com/80"
                      class="w-full h-full object-cover"
                    />
                  </div>
                  <div class="text-lg font-semibold mt-2">张明</div>
                  <div class="text-sm text-gray-500">东湖社区网格员</div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="grid grid-cols-4 gap-4 text-center">
                    <div>
                      <div
                        class="text-xl font-bold"
                        style="color: var(--primary-color)"
                      >
                        132
                      </div>
                      <div class="text-xs text-gray-500">信息采集</div>
                    </div>
                    <div>
                      <div class="text-xl font-bold text-blue-500">28</div>
                      <div class="text-xs text-gray-500">事件处理</div>
                    </div>
                    <div>
                      <div class="text-xl font-bold text-purple-500">45</div>
                      <div class="text-xs text-gray-500">走访户数</div>
                    </div>
                    <div>
                      <div class="text-xl font-bold text-orange-500">92</div>
                      <div class="text-xs text-gray-500">工作评分</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card mb-6">
                <div class="p-4">
                  <div class="text-lg font-semibold mb-3">工作区域</div>
                  <div class="flex items-center mb-3">
                    <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
                    <div class="text-sm">北京市海淀区东湖社区</div>
                  </div>
                  <div
                    class="h-40 bg-gray-100 rounded-lg flex items-center justify-center"
                  >
                    <div class="text-center">
                      <i class="fas fa-map text-2xl text-gray-400 mb-2"></i>
                      <div class="text-xs text-gray-500">地图加载中...</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="space-y-4 mb-6">
                <div class="card">
                  <div class="p-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <div
                          class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"
                          style="color: var(--primary-color)"
                        >
                          <i class="fas fa-clipboard-list"></i>
                        </div>
                        <div>
                          <div class="font-medium">我的工作</div>
                          <div class="text-xs text-gray-500">
                            查看工作任务和进度
                          </div>
                        </div>
                      </div>
                      <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <div
                          class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 text-blue-500"
                        >
                          <i class="fas fa-chart-line"></i>
                        </div>
                        <div>
                          <div class="font-medium">工作统计</div>
                          <div class="text-xs text-gray-500">
                            查看工作数据和分析
                          </div>
                        </div>
                      </div>
                      <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <div
                          class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 text-purple-500"
                        >
                          <i class="fas fa-medal"></i>
                        </div>
                        <div>
                          <div class="font-medium">我的荣誉</div>
                          <div class="text-xs text-gray-500">
                            查看获得的奖励和荣誉
                          </div>
                        </div>
                      </div>
                      <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="p-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center">
                        <div
                          class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3 text-yellow-500"
                        >
                          <i class="fas fa-cog"></i>
                        </div>
                        <div>
                          <div class="font-medium">设置</div>
                          <div class="text-xs text-gray-500">
                            账号、隐私和通知设置
                          </div>
                        </div>
                      </div>
                      <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                  </div>
                </div>
              </div>

              <button
                class="w-full py-3 rounded-lg font-medium text-gray-600 bg-gray-100 mb-6"
              >
                退出登录
              </button>

              <div class="text-xs text-center text-gray-400 mb-6">
                数字乡村App v2.5.0
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
